JavaScript voor beginners (deel 2) 


(Interlactie graag! 


Het eerste deel van deze cursus maakte het al snel duidelijk: JavaScript is de 
geknipte manier om webpagina's tot leven te brengen! Vandaag doen we daar nog 
een schepje bovenop, met geanimeerde figuren, interactieve formulieren en handige 


frames. Á\_TOON VAN DAELE 


V- alle duidelijkheid: dit tweede deel van onze JavaScript-cur- 
sus bouwt voort op wat in het eerste deel aan bod is gekomen. 
Ligt dat alweer ver in het geheugen of heb je nog geen kans gezien je 
door dat deel te wurmen, dan is nu het geschikte moment om je daar 
nog even in te verdiepen. Dit tweede deel is overigens wel op dezelfde 
leest geschoeid: geen nodeloos getheoretiseer, maar meteen met de 
deur in huis. Je mag je dus opnieuw aan een reeks kleine javascriptjes 
verwachten die je zonder veel omhaal naar je eigen webpagina's kan 
overplanten. Zet je schrap, want het eerste scriptje staat al te trap- 
pelen… 


Rollovers: quick n dirty 


<html> 

<body> 

Bezoek je favoriete stek:<p> 

<a href="http://www.clickxmagazine.be” 
onMouseover="document.clickx.src=® 
‘clickxlogo2.gif’ 
onMouseout="document.clickx.src=® 
‘clieckxlogol.gif’ “> 

<img sre="cliekxlogol.gif" © 


width="197" height="86" 9 
border="0" name="clickx"></a> 
</body> 

</html> 


De html-code van dit stukje zal je weinig hoofdbrekens bezorgen: je 
roept in je webpagina een afbeelding op, en daar drapeer je meteen 
een aanklikbare link rond (<a href= > … </a>). Nu vonden we 
een kleine animatie wel leuk, en dus roepen we JavaScript ter hulp 
om die afbeelding automatisch te vervangen door een andere, zodra 
de bezoeker met de muis boven de figuur zweeft — een zogenaamde 
rollover. Met enkele coderegels is dat zo gepiept. Belangrijk is wel 
dat je de afbeelding eerst een naam geeft (name="clickx"), zodat 
je via JavaScript naar die afbeelding kan verwijzen. Vervolgens ma- 
ken we dankbaar gebruik van de ingebouwde event handler onMou- 
seover. Die zorgt ervoor dat er iets gebeurt zodra de gebruiker met 
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de muispijl over het object gaat. Wat dat precies is, wordt vastgelegd 
Dat 
betekent zoveel als: voor het bronbestand (src staat voor source) 
van het document-object clickx (onze afbeelding dus) moet je clickx- 
logo2.gif nemen. De tegenvoeter van deze event handler, onMouse- 
out, zorgt ervoor dat je weer de oorspronkelijke figuur te zien krijgt 
(clickxlogo1.gif), zodra je de muispijl weer van het object weghaalt. 


door de code document.clickx.src="clickxlogo2.gif’. 


Bezoek je favoriete stek: 


Bezoek je favoriete stek: 


Een typische rollover in actie 


Click® 


Meer plezier aam het man Cy 


Rollovers: gestroomlijnd 


OK, we geven het toe: het stukje JavaScript van daarnet kan wel wat 
gepolijster… De eerste keer dat de bezoeker met de muispijl boven 
de afbeelding zweeft, moet de browser de (tweede) figuur namelijk 
nog van de webserver zien te halen, en dat kan bij grotere bestanden 
best wel tot enige wachttijd leiden. Dat kan je echter voorkomen — 
met JavaScript natuurlijk. 


<html> 

<head> 

<script type="text/javascript”> 

clickxl = new Image() 

clickx2 = new Image() 

elickzl.sre= “clieckxlogol.gif” 

elickx2.sre= “clieckxlogo2.gif” 

function muisOver() { 
document.clickx.sre="cliekxlogo2.gif” 

} 

function muisWeg() { 
document.clickx.sre="cliekxlogol.gif” 

} 

</script> 

</head> 

<body> 

Bezoek je favoriete stek:<p> 


Oogt je site een beetje saai, en niet bijster interactief? 
Dan kan een vleugje JavaScript wellicht wonderen doen. 


onMouseover="muisOver()” 
onMouseout="muisWeg() "> 

<img sre="cliekxlogol.gif”" © 
width="197" height="86" 9 
border="0" name="clickx"></a> 
</body> 

</html> 


Het trucje met de functie-aanroepen ken je al uit de vorige afleve- 
ring: op die manier kunnen we de code tussen de <body>-tags over- 
zichtelijk houden én kunnen we dezelfde functies - in ons voorbeeld 
muisOver() en muisWeg() -desnoods verschillende keren vanuit 
dezelfde webpagina aanroepen, zonder de code te moeten herhalen. 
De échte nieuwigheid in deze code zit elders, met name helemaal aan 
het begin van het script: clickxl = new Image() en 
clieckx2 = new Image(). Wat we hier doen, is met behulp van 
het ingebouwde Image ( ) voor beide figuren een nieuw beeldobject 
creëren. Vervolgens verwijzen we beide beeldobjecten naar het cor- 
recte bronbestand: elieckxl .sre="cliekxlogol.gif” en 
clickx2.src= "clickxlogo2.gif”. Door deze toewijzingen 
verplichten we de browser alvast deze beelden van de webserver in 
te lezen en in zijn cache — als tijdelijke internetbestanden — in te 
lezen. Wanneer we nu een van beide afbeeldingen oproepen via een 
functieaanroep, verschijnt die quasi onmiddellijk in beeld, aangezien 


<a href="http://www.clickxmagazine.be” 


Webformulieren: interactie 


De meest voor de hand liggende manier om in 
contact te komen met je bezoekers is via een 
webformulier. Niet alleen kunnen ze jou zo 
allerlei informatie doorspelen; je kan je web- 
pagina ook op hun invoer laten reageren. Het 
is bijvoorbeeld perfect mogelijk hen via zo’n 
formuliertje naar hun lievelingskleur te vragen 
en hen terstond te belonen door je webpagina 
in die achtergrondkleur te tooien. 


<html> 

<head> 

<script type="text/javascript”> 

function kiesKleur(tint){ 
document.bgColor= tint 

} 

</script> 

</head> 

<body> 

<form> 

Wat is je favoriete kleur? <p> 

<input type="button” © 

value="Blauwgroen” © 

onClick="kiesKleur(‘teal’')”> 

<input type="button” © 

value="Rose" 9 


onClick="kiesKleur(‘ #FFCOCB' ) ”> 
<input type="button” © 
value="Paars” © 
onClick="kiesKleur( ‘#9932CD') "> 
</form> 

<p>(rest van de tekst...) 
</body> 

</html> 


We hebben in onze scriptjes al een paar keer 
met functies gewerkt, maar nieuw is wel dat 
de functie dit keer met een parameter werkt. 
In ons voorbeeld heeft die parameter de naam 
tint meegekregen, en zoals je merkt plaatsen 
we die tussen ronde haakjes, meteen na de 
functienaam. De bedoeling is nu dat die para- 
meter — eigenlijk een soort variabele - met een 
concrete inhoud wordt opgevuld. Hoe dat pre- 
cies gebeurt en om welke inhoud het gaat, 
regelen we vanuit de functie-aanroep binnen 
de <body>-tags. Vervolgens zorgen we er bin- 
nen de functie voor dat de inhoud van die 
parameter als achtergrondkleur wordt inge- 
steld (document. bgColor=tint). 

Laten we nu eens kijken hoe die aanroep pre- 
cies in elkaar steekt. We gaan er wel van uit 


de browser die slechts uit z'n cache hoeft op te diepen. 


Wat is je favoriete kleur? 


Blauwgroen || Rosell Paars 


(rest van de tekst…) 


Pagina naar willek(l)eur…. 


dat je al weet hoe je een webformulier in html 
in elkaar knutselt. Aan de drie formulierele- 
menten voegen we enkel een klein stukje Ja- 
vaScript toe: onClick=kiesKleur('…’ ). Zo- 
als je wellicht al vermoedt, is onClick alweer 
een event handler: zodra de bezoeker de knop 
(button) aanklikt, schiet de actie in gang die 
na onClickx= wordt gespecificeerd. Die actie is 
niks anders dan het aanroepen van onze func- 
tie, met een welbepaalde parameter. In het 
eerste geval is dat de naam van een kleur 
(teal) die in html bekend is. Andere standaard- 
kleuren zijn onder meer maroon (donkerbruin), 
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OE 


» olive (olijfgroen), lime (felgroen), navy (don- 


kerblauw), aqua (lichtblauw) en fuchsia (licht- 
paars). Verkies je een niet-standaardkleur, dan 
geef je de hexadecimale code van de kleur 
door (zoals #FFCOCB). 

Op vergelijkbare manier kan je de bezoeker 
natuurlijk ook andere documenteigenschappen 
laten aanpassen. Het is bijvoorbeeld net zo 
goed mogelijk je pagina met een zelfgekozen 
achtergrondfiguur te laten opvullen. Dat een 
functie met verschillende parameters tegelijk 
overweg kan, is handig meegenomen… 


<html> 

<head> 

<script type="text/javascript”> 
function kiesAchtergrond® 
(tint, figuur){ 

document .bgColor=tint 
document .body. © 
background=figuur 

} 

</script> 

</head> 


Webformulieren: validatie 


Je hebt het zonder twijfel al vaker meege- 
maakt — of je er zelf al schuldig aan gemaakt 
s-) : in een webformulier worden velden wel 
eens foutief of botweg niét ingevuld. Best 
vervelend, want met die informatie kan je 
natuurlijk weinig aanvangen. Gelukkig kan ook 
hier een brokje JavaScript z'n nut bewijzen, 
meer bepaald om de inhoud van de velden 
eerst aan een controle te onderwerpen alvo- 
rens het formulier effectief door te sturen. 
Het volgende script maakt duidelijk wat we 
bedoelen: 


<html> 
<head> 
<script type=9 
"text/javascript”> 
function checkForm® 
(Éormulier) { 
if (formulier. 9 
wwoordl1.value=="" { 
alert(”Vul 5 
een wachtwoord in aub!”) 
formulier® 
.wwoord1.focus() 
return false 
} 


if (formulier. 9 
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<body> 

<form> 

Kies je favoriete © 
achtergrond: <p> 

<input type="button” 5 
value="Kleur: blauwgroen” © 
onMouseover="® 
kiesAchtergrond(‘teal’,’')"> 
<input type="image” 5 
src="clickxlogol.gif"” © 
width="60" height="26" 9 
onMouseover="kiesAchtergrond® 
(“’,'elieckxlogol.gif’")"> 
</form> 

<p>(rest van de tekst...) 
</body> 

</html> 


Je merkt dat we onze (hernoemde) functie van 
een tweede opdracht hebben voorzien (daocu- 
en dat 
beide opdrachten een andere parameter (res- 
pectievelijk tint en figuur) doorgespeeld 
krijgen. Je hebt natuurlijk meteen door wat de 


ment .body.background=figuur), 


wwoordl.value != 9 
formulier.wwoord2.value) { 

alert © 
(“Wachtwoorden zijn © 
verschillend!”) 

formulier 
.wwoord1.focus() 

formulier 
.wwoord1.select() 

return false 

} 
return true 

} 
</script> 
</head> 
<body> 
<form onSubmit=® 
"return checkForm(this)” 3 
action="zekereactie.cgi”> 
Kies een wachtwoord: © 
<input type=® 
“password” name=® 
“wwoord1” size="10"><p> 
Herhaal dit wachtwoord: © 
<input type="password” © 
name="wwoord2” 5 
size="10"><p> 


<input type="submit” ò 


Kleur: blauwgroen N d 


En waarom zou hij zelf ook niet het behang 
kiezen? 


tweede opdracht inhoudt: die zorgt ervoor dat 
de aangeleverde afbeelding als achtergrond 
(body.background) van de webpagina (doc- 
ument) fungeert. Let wel even op met de 
aanroep van de functie. Nemen we de tweede 
aanroep als voorbeeld: onMouseover="kiesA 
chtergrond( '','clickxlogol.gif')”. Je 
merkt dat we hier de eerste parameter ge- 
woon leeg laten (*), en enkel de tweede pa- 
rameter — het bestand voor de afbeelding — 
opvullen. Bij de eerste aanroep doen we het 
omgekeerde, en laten we de tweede parameter 
oningevuld. 


value="Verstuur"> © 
<input type="reset” 5 
value="Wis!" > 

</form> 

</body> 

</html> 


Laten we ons eerst concentreren op het snip- 
pertje JavaScript binnen de <body>-tags: 
onSubmit="return checkForm(this)”. 

We hebben hier alweer met een andere event 
handler te maken: de actie die we hier hebben 
bepaald, schiet in gang zodra de bezoeker op 
de submit-knop van ons formulier drukt. Het 
komt erop neer dat we dan de functie check 
Form() aanroepen met als parameter this. 
Voor JavaScript betekent this hier zoveel als: 
de inhoud van het ganse formulier. Door er 


(verstuur 


Eerst door de controle, dan pas de grens over! 


JAKKES, WEER ZON SITE 
MET LAVASCRIPT !!! 


return voor te plaatsen, maken we de functie duidelijk 
dat we een reactie verwachten. Ofwel zal de functie re- 
turn true teruggeven, en dan wordt 
action="zekereactie.cgi” uitgevoerd — bijvoorbeeld 
een script op de server dat de formulierinhoud verder 
verwerkt, ofwel retourneert de functie return false en 
komt die action niet aan z’n trekken. 

Over nu naar de eigenlijke functie. Het if-principe is je 
al bekend uit de eerste aflevering: enkel als aan de 
vermelde voorwaarde voldaan is, wordt de code uitge- 
voerd die zich in het { }-blok achter de if-regel bevindt. 
Met de eerste if gaan we na of het eerste wachtwoord 
leeg(gelaten) is. Is dat inderdaad het geval, dan krijgt de 
bezoeker een vingerwijzing en zal de muiscursor hem 
weer opwachten in dat eerste wachtwoordveld — daar 
zorgt de ingebouwde methode focus() immers voor. 
Ten slotte geeft de functie er de brui aan, maar niet voor 
eerst return op false te hebben gezet. 

Blijkt het wachtwoordveld niét leeg, dan neemt de twee- 
de if de fakkel over. Die checkt of beide wachtwoordvel- 
den misschien verschillend zijn (het teken 1= betekent: 
niet gelijk aan). Zijn ze aan elkaar gelijk, dan geeft de 
functie z’n fiat door return op true in te stellen. In het 
andere geval krijgt de bezoeker alweer het deksel op de 
neus, en ziet hij door de ingebouwde methode select () 
het eerste wachtwoordveld bovendien al geselecteerd, 
klaar om overschreven te worden met een correcte 
versie. 


Frames: in of uit 


A CDocuments and Settingsttoenidhareashiad index.htm Microsof … [ESE 
Betand Beken Beek Poorten Cra bie bd 


In het begin van deze cursus nt oema einmsinnnenneen En E 
gaven we al te verstaan dat je dd 

toch wel de html-basis onder 
de knie moet hebben vooraleer 
je je aan JavaScript waagt. Om- 
dat werken met frames niet 
meteen onder die basiskennis 
valt, verdiepen we ons eerst 
even in de html-code waarmee 


je frames bedwingt. Een frame 
kan je zien als een kleiner 
browservenster dat zich binnen een groter venster bevindt. Een voorbeeld maakt 
dit meteen duidelijker. Zorg dat je twee webpagina's klaar hebt en noem die 
respectievelijk een.htm en twee.htm. Nu creëer je in het kladblok de volgende 
webpagina, die je index.htm noemt: 


Frames door een html-bril. 


<html> 
<frameset cols="200", *> 
<frame name="links” src="een.htm”> 
<frame name="rechts” src="twee.htm”> 
</frameset> 
</html> 


Zorg dat de drie pagina’s zich in dezelfde map bevinden, en roep vervolgens van- 
uit je browser de pagina index.htm aan. Je merkt dat een.htm een plekje krijgt in 
het linkerframe en dat het rechterframe onderdak verschaft aan twee.htm. De 
magie zit hem vooral in de html-code <frameset cols="200,*">. Hiermee 
bepaal je dat er voor de frames twee ‘kolommen’ (cols) gereserveerd worden, en 
dat het eerste frame — de meest linkse kolom dus — 200 pixels breed mag worden, 
terwijl het andere frame de rest van het browservenster (*) mag opsouperen. 
Eigenlijk had je net zo goed <frameset rows="*;*"> kunnen intikken: beide 
frames komen dan onder elkaar te staan (rows betekent rijen) en krijgen elk 
evenveel ruimte toebedeeld. Op deze manier creëren we dus eigenlijk drie brow- 
servensters: dat voor de frameset zelf (waarin we index.htm hebben onderge- 
bracht), en twee kleinere vensters voor de frames (waarin we een.htm en twee. 
htm gestopt hebben). Het browservenster van de frameset staat aan de top van 
de vensterhiërarchie en zou je dus als de ‘vader’ (parent) van de twee kleinere 
browservensters (children) kunnen beschouwen. 


Nu je ongeveer weet hoe frames in elkaar steken, kunnen we er net zo goed ook 
wat JavaScript op los laten. Met een soeplepeltje code kan je je bijvoorbeeld heel 
wat ellende besparen… 

Om te beginnen is er een probleem wanneer een bezoeker in de hitlijsten van een 
zoekrobot een link naar je pagina een.htm aantreft. Klikt hij die link aan, dan 
belandt hij pardoes op die pagina, zónder de bijhorende frameset-pagina index. 
htm in zijn browser te zien! Dat probleem los je op door binnen de <head>-tags 
van je framepagina’s (een.htm en twee.htm) de volgende code te plaatsen: 


<script type="text/javascript”> 


if (self.location == top.location) { 
top.location.href = “index.htm” 

} 

</script> 


Hier gaan we eerst na of de locatie (het browservenster, zeg maar) van de hui- 
dige pagina — die we steevast met self aanduiden — meteen ook het opperste 
browservenster in de vensterhiërachie is (top.location). Is dat inderdaad zo, » 
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-há- 


» dan betekent dit dat de pagina zich niet in een 
frameset bevindt. We lossen dit op door de 
huidige pagina in het browservenster te ver- 
vangen door de url van onze framesetpagina 
(index.htm). Het resultaat: onze een.htm-pa- 
gina zit weer netjes gekooid! 

Het omgekeerde fenomeen durft zich ook wel 
eens voordoen. Stel, iemand vindt jouw webpa- 
gina best leuk, en besluit die in een eigen 


maar dokter JavaScript heeft ook daar een 
remedie voor… Plaats de volgende code binnen 
de <head>tags van je webpagina's: 


<script type="text/javascript”> 
if (self.location != 


top.location){ 


ee, 


top. location 


self.location 


De logica achter dit stukje code heb je wellicht 
zelf al uitgevlooid. Als het browservenster 
waarin de webpagina verschijnt niet ook het 
opperste browservenster is, dan betekent dit 
dat onze pagina binnen een frameset gevan- 
gen is. De laatste coderegel biedt echter een 
uitweg: vervang het opperste browservenster 
(top. location) door het browservenster van 
onze pagina (self. location). 


frameset te plaatsen. Zo lijkt het alsof jouw } 
geesteskind uit zijn stal komt. Niet netjes, </script> 
Frames: in tweevoud 
<html> 


Eén klik... twee 
nieuwe frames! 


Eens je de smaak van frames te pakken hebt, kan 
je al snel moeilijk zónder. Een typische framecon- 
structie is die waarbij de frameset uit twee 
frames bestaat: links een frame met allerlei op- 
ties in een navigatiemenu, en rechts het hoofd- 
frame. Klik je in het menu een bepaalde optie aan, 
dan wil je uiteraard de bijhorende pagina in het 
hoofdframe zien verschijnen, maar wellicht ook 
een aanpassing in het navigatieframe doorge- 
voerd zien. Meer bepaald hoeft de optie die je net 
hebt aangeklikt niet meer zichtbaar te zijn, of 
toch niet meer selecteerbaar (zie figuur). Het 
komt er dus op neer dat je met één muisklik 
zowel het navigatieframe als het hoofdframe 
door een aangepaste webpagina wil vervangen. 
Dat is een kolfje naar de hand van Javascript. 
Vooraf maken we natuurlijk wel de nodige pagi- 
na’s klaar. Stel dat we in het menu drie opties 
aanbieden, dan voorzien we voor het naviga- 
tieframe bijvoorbeeld eenlinks.htm, tweelinks. 
htm en drielinks.htm, en voor het hoofdframe 
eenrechts.htm, tweerechts.htm en drierechts. 
htm. 

Onze html-frameset (index.htm) ziet er als volgt 
uit - zoals je ziet, laadt die standaard de pagina’s 
eenlinks.htm en eenrechts.htm in: 


JAVASCRIPT ONLINE 


Wie zich verder in deze materie wil verdiepen, 
kan alvast terecht in een gespecialiseerde boek- 
handel. Een bezoekje aan de stek van Het Com- 
puterwinkeltje www.hcw.be leverde bijvoorbeeld 
al meer dan 30 boekwerken op bij het intikken 
van het trefwoord javascript. Maar ook op het 
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<frameset cols="200,*"> 
<frame name="links" D 
src="eenlinks.htm”> 
<frame name="rechts” © 
src="eenrechts.htm”> 
</frameset> 
</html> 


Laten we nu tweelinks.htm verder uitwerken, de 
pagina die in het navigatieframe getoond wordt 
meteen nadat we de link van optie 2 hebben 
aangeklikt. Die code kan er als volgt uitzien: 


<html> 

<head> 

<script type="text/javascript”> 

function openFrames(pagina) { 
parent.rechts. 9 

document. location. © 

href=paginat”rechts.htm” 
document. location. © 

href=pagina+”links.htm” 

} 

</script> 

</head> 

<body> 

Maak uw keuze:<p> 

<a href="javascript:® 

openFrames( ‘een’)">® 

Optie 1</a><p> 

<h4>Optie 2 


<a href="javascript:® 


--></h4><p> 


net zelf vind je tal van websites die je graag een 
handje helpen en je zelfs voorzien van tientallen 
gratis scripts. Places to be zijn alvast http://java- 
script.internet.com, met meer dan 2.000 verschil- 
lende scripts netjes gerangschikt per thema 
(zoals buttons, calculators, cookies, forms en 
games), en www.free-javascripts.com, dat eveneens 
honderden thematisch geordende scripts bevat. 


openFrames(‘drie’)">® 
Optie 3</a><p> 
</body> 

</html> 


Zodra je een Tink aanklikt, wordt de functie 
openFrames( ) aangeroepen, met als parameter 
(het eerste stukje van) de gewenste pagina. In 
ons voorbeeld is dat een voor Optie 1, en drie voor 
Optie 3. Die functie zorgt er nu voor dat in beide 
frames de juiste pagina wordt geopend. Eerst is 
het hoofdframe aan de beurt, dat we in onze 
frameset de naam rechts hebben gegeven. Deze 
coderegel laat zich als volgt ontrafelen: roep de 
webpagina met de url eenrechts.htm op, en stop 
die in het frame dat in onze frameset (de ‘parent’ 
in de vensterhiërarchie: zie boven) de naam 
rechts draagt. In de tweede coderegel is het na- 
vigatieframe zélf aan verversing toe: stop de 
pagina met de url eenlinks.htm in het frame van 
het huidige document. Zo zie je: met JavaScript 
is het een koud kunstje om twee frames simul- 
taan te vervangen — of méér, als je dat ver- 
kiest. 

Meteen zijn we aan het eind van deze tweedelige 
cursus gekomen. Een stoomcursus zeg maar, 
want je hebt intussen kennis gemaakt met heel 
wat objecten, én je pagina’s op allerlei manieren 
speelser, aantrekkelijker en interactiever ge- 
maakt. Het is nu aan jou om verder te experi- 
menteren, maar wie ons kaderstukje doorneemt, 
beseft heel goed dat hij er niet alléén voor staat. 
Veel scriptpret nog! 


Al deze scripts zie je in werking, en je kan ze zo 
naar je eigen webstek versassen — de nodige 
uitleg krijg je er bovenop. Verder tref je op de 
onvolprezen site van W3Schools www.w3schools. 
com/js nog een heuse JavaScript-tutorial aan, 
waarin alle belangrijke constructies en objecten 
stapsgewijs aan bod komen. Vooruit, waarop 
wacht je? « 


